<div style="padding:24px;">
  <p  class="page-title">
    <span>推客任务列表</span>
  </p>
  <div class="close-prompt" *ngIf="status === 2"><i class="anticon anticon-close-circle-o"></i> 您的推客功能已被管理员关闭，请联系客服</div>
  <div class="container-warp" *ngIf="status === 0||status === 2">
    <div class="operation-line">
      <button nz-button [nzType]="'primary'" class="fl" [disabled]="status !== 0" (click)="goAddTask()">
        <span>新建任务</span>
      </button>
      <div class="fr">
        <nz-select style="width: 80px;display: block;float: left;"
                   [(ngModel)]="search_type"
                   (nzOpenChange)="selectChange()"
                   [nzAllowClear]="false">
          <nz-option
            [nzLabel]="'任务名称'"
            [nzValue]="2">
          </nz-option>
          <nz-option
            [nzLabel]="'任务ID'"
            [nzValue]="1">
          </nz-option>
          <nz-option
            [nzLabel]="'商品名称'"
            [nzValue]="3">
          <nz-option
            [nzLabel]="'活动名称'"
            [nzValue]="4">
          </nz-option>
          </nz-option>
        </nz-select>
        <nz-input
          style="width: 200px;display: block;float: left;"
          [nzType]="'search'"
          [(ngModel)]="keyword"
          (nzBlur)="getListData()"
          [nzPlaceHolder]="'请输入'+ selectedLabel"
        ></nz-input>
      </div>
    </div>

    <nz-tabset [nzTabPosition]="'top'" [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="page = 1;getListData()">
      <nz-tab>
        <ng-template #nzTabHeading>
          全部
        </ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>
          未开始
        </ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>
          进行中
        </ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>
          已暂停
        </ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>
          已结束
        </ng-template>
      </nz-tab>
    </nz-tabset>
    <div class="tab-content">
      <div class="table-content">
        <nz-table  #nzTable
                   [nzAjaxData]="listData"
                   [nzLoading]="loading"
                   [(nzPageIndex)]="page"
                   [(nzPageSize)]="pageSize"
                   (nzPageIndexChange)="getListData()"
                   [nzTotal] ="total"
                   [nzPageSize]="10">
          <thead nz-thead>
          <tr>
            <th nz-th><span>任务类型/名称</span></th>
            <th nz-th style="width:180px;"><span>有效期</span></th>
            <th nz-th><span>任务ID</span></th>
            <th nz-th><span>消耗积分/所需等级</span></th>
            <th nz-th><span>领取人数</span></th>
            <th nz-th><span>消耗积分</span></th>
            <th nz-th><span>状态</span></th>
            <th nz-th><span>操作</span></th>
          </tr>
          </thead>
          <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of listData">
              <td nz-td style="width: 300px;">
                <span class="sales" *ngIf="data.type === 1">销售类</span>
                <span class="exposure" *ngIf="data.type === 2">曝光类</span>
                {{data.task_name}}
              </td>
              <td nz-td>从{{data.validity_start}}至{{data.validity_end}}</td>
              <td nz-td>{{data.id}}</td>
              <td nz-td>{{data.point}} / lv {{data.min_take_level}}</td>
              <td nz-td>{{data.task_data_statistics?.took_task_total}}</td>
              <td nz-td>{{data.expend}}</td>
              <td nz-td *ngIf="data.status === 1">暂停</td>
              <td nz-td *ngIf="data.status === 2">停止</td>
              <td nz-td *ngIf="data.status === 0">{{data.progress}}</td>
              <td nz-td>
                  <span>
                    <a href="javascript:;" routerLink="../detail/{{data.id}}" *ngIf="data.progress !=='进行中'">详情</a>
                    <a href="javascript:;" routerLink="../detail/{{data.id}}" *ngIf="data.progress==='进行中'">编辑</a>
                    <span nz-table-divider *ngIf="data.progress==='进行中'"></span>
                    <a href="javascript:;" *ngIf="data.status===0&&data.progress==='进行中'" [ngClass]="{'disabled': status !== 0}" (click)="changeStatus(data.id, data.task_no, 1)">暂停</a>
                    <a href="javascript:;" *ngIf="(data.status===1||data.status===2)&&data.progress==='进行中'" [ngClass]="{'disabled': status !== 0}" (click)="changeStatus(data.id, data.task_no, 0)">开启</a>
                  </span>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</div>

<!-- 推客被自己关闭 -->
<div class="container-warp" *ngIf="status === 1">
  <div class="center">
    <i class="dredge"></i>
    <button nz-button [nzType]="'primary'" [nzSize]="large" (click)="applytuike()">
      <span>开通推客</span>
    </button>
    <span class="text">微信端的“淘客”体系，基于社交裂变产生的流量渠道</span>
  </div>
</div>




